<template>
  <div class="app-container">
    <div class="submission-container">
      <div class="LinkWrap_problem">
        <router-link :to="'/problem/details/' + submission.problemId" class="inlineBlock myProblem">
          {{ submission.problemName }}
        </router-link>
      </div>
      <div>
        <h3 class="s_h3">提交记录</h3>
        <div class="s_InfoWrap">
          <el-descriptions>
            <el-descriptions-item label="状态">
              <el-tag :type="tagType" size="small"><strong>{{ submission.judgeResult }}</strong></el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="提交时间">
              <el-tooltip :enterable="false" class="item" effect="light" content="提交评测的时间" placement="bottom">
                <el-button type="text" class="s_score_btn" size="medium"><strong>{{ submission.submitTime }}</strong></el-button>
              </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="执行时间">
              <el-tooltip :enterable="false" class="item" effect="light" content="开始运行代码的时间" placement="bottom">
                <el-button type="text" class="s_score_btn" size="medium"><strong>{{ submission.executeTime }}</strong></el-button>
              </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="所用语言">
              <el-tooltip :enterable="false" class="item" effect="light" content="提交评测所使用的语言名称" placement="bottom">
                <el-button type="text" class="s_score_btn" size="medium"><strong>{{ submission.languageName }}</strong></el-button>
              </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="最终得分">
              <el-tooltip :enterable="false" class="item" effect="light" content="由于测试点分数设置由试题作者设定，故总分不一定为100" placement="bottom">
                <el-button type="text" class="s_score_btn" size="medium"><strong>{{ submission.judgeScore }}</strong></el-button>
              </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="评测机">
              <el-tooltip :enterable="false" class="item" effect="light" content="评测机名称" placement="bottom">
                <el-button type="text" class="s_score_btn" size="medium"><strong>{{ submission.judgerName }}</strong></el-button>
              </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="执行用时">
              <el-tooltip :enterable="false" class="item" effect="light" content="执行评测运行总时间" placement="bottom">
                <el-button type="text" class="s_score_btn" size="medium"><strong>{{ submission.usedTime }}</strong></el-button>
              </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item label="内存消耗">
              <el-tooltip :enterable="false" class="item" effect="light" content="评测运行占用最大内容" placement="bottom">
                <el-button type="text" class="s_score_btn" size="medium"><strong>{{ usedMemoryFormatter }}</strong></el-button>
              </el-tooltip>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div>
        <h3 class="s_h3">运行日志</h3>
        <el-card class="box-card">
          <p v-html="judgeLogFormatter"/>
        </el-card>
      </div>
      <div>
        <h3 class="s_h3">提交的代码</h3>
        <el-card class="box-card">
          <markdown-viewer v-model="codeFormatter" height="800px"/>
        </el-card>
      </div>
      <div class="s_return">
        <router-link :to="'/problem/details/' + submission.problemId" class="inlineBlock myProblem">
          返回该题
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import MarkdownViewer from '@/components/MarkdownViewer'

import submissionApi from '@/api/oj/submission'

export default {
  name: 'Submission',
  components: { MarkdownViewer },
  data() {
    return {
      submission: []
    }
  },
  computed: {

    tagType() {
      return (this.submission.judgeResult === 'AC' || this.submission.judgeResult === '答案正确') ? 'success' : 'danger'
    },

    usedMemoryFormatter() {
      if (this.submission.usedMemory === undefined) {
        return ' MB'
      }
      return (this.submission.usedMemory / 1024).toFixed(2) + ' MB'
    },

    judgeLogFormatter() {
      if (this.submission.judgeLog === undefined) {
        return ''
      }
      return this.submission.judgeLog.replace(/\n/g, '<br>')
    },

    codeFormatter() {
      if (this.submission.code === undefined) {
        return ''
      }
      const lanName = this.submission.languageName
      let lan
      if (lanName === 'Java') {
        lan = 'java'
      } else if (lanName === 'Python3') {
        lan = 'python'
      } else {
        lan = 'c'
      }
      return '```' + lan + '\n' + this.submission.code + '\n```'
    }

  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id
      this.getSubmissionInfo(id)
    } else {
      this.$router.push({ path: '/404' })
    }
  },
  methods: {

    getSubmissionInfo(submissionId) {
      submissionApi.getSubmissionById(submissionId).then(res => {
        this.submission = res.result
      }).catch(error => {
        console.log(error)
        this.$router.push({ path: '/404' })
      })
    }

  }
}
</script>

<style scoped>

.submission-container {
  min-width: 992px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 0 48px;
}

.LinkWrap_problem {
  margin: 16px 0;
  font-size: 24px;
  color: rgba(69, 77, 89, 1);
  font-weight: bold;
  text-align: center;
}

.LinkWrap_problem .myProblem:hover {
  color: #1e6abc;
}

.s_h3 {
  font-size: 24px;
  margin-bottom: 8px;
  color: rgba(33, 40, 53, 1);
  font-weight: 500;
}

.s_InfoWrap {
  width: 100%;
  border: 1px solid rgba(229, 231, 235, 1);
  padding: 12px 20px 0;
}

.s_score_btn {
  color: rgb(96, 98, 102, 1);
  border: none;
  margin: 0;
  padding: 0;
  height: 100%;
  cursor: text;
}

.s_return {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.s_return a {
  color: rgba(69,77,89, 1);
  font-weight: bold;
}
.s_return a:hover {
  color: rgba(65,145,255, 1);
}

</style>
